<template>
	<view class="flex">
		<!-- <view class="flex flex m-r20" @click="open">
			<text class="text-700-130">{{ selectedCity }}</text>
			<image class="square-30 m-l14" src="@/static/images/home/location-1.png"></image>
		</view> -->
		<view class="search flex flex-1 p-h16">
			<image class="square-48" src="@/static/images/public/search.png"></image>
			<input class="flex-1 m-l10" type="text" placeholder="请输入关键词/职位" v-model="value" @blur="emit('blur', $event)" />
		</view>


		<up-picker ref="pickerRef" title="选择城市" :show="show" closeOnClickOverlay :columns="[columns]" @confirm="onConfirm"
			@cancel="close" @close="close" />
	</view>
</template>

<script lang="ts" setup>
import { useHomeLocationPicker } from '@/hooks/use-home-location'
import { computed, ref } from 'vue'
const props = defineProps({
	modelValue: String,
	customPlaceholder: {
		type: String,
		default: "搜索"
	}
})
const emit = defineEmits(['update:modelValue', 'change'])
const value = computed({
	get: () => props.modelValue,
	set: (val) => {
		emit('update:modelValue', val)
	}
})
const {
	pickerRef,
	selectedCity,
	columns,
	show,
	open,
	close,
	onConfirm,
} = useHomeLocationPicker()
</script>

<style lang="scss" scoped>
.input-view {
	width: 570rpx;
	height: 74rpx;
	border-radius: 20rpx;
	background-color: $bg-color-1;
	border: 1rpx solid $border-color-1;
}

.search {
	height: 74rpx;
	border-radius: 20rpx;
	background: $bg-color-1;
	border: 2rpx solid #3F77FB;
	flex: 1;
}
</style>